<!DOCTYPE html>
<html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-0 vector-toc-not-available vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-0 skin-theme-clientpref-day vector-sticky-header-enabled" lang="de" dir="ltr"><head>
<meta charset="UTF-8">
<title>JQuery UI</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="./_res_/favicon.png">
<link rel="canonical" href="https://de.wikipedia.org/wiki/JQuery_UI"> <link href="./_mw_/ext.cite.styles.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.wikimediamessages.styles.css" rel="stylesheet" type="text/css">
<link href="./_mw_/skins.vector.icons.css" rel="stylesheet" type="text/css">
<link href="./_mw_/skins.vector.search.codex.styles.css" rel="stylesheet" type="text/css">
<link href="./_mw_/skins.vector.styles.css" rel="stylesheet" type="text/css">
<meta name="ResourceLoaderDynamicStyles" content="">
<link href="./_mw_/ext.gadget.citeRef.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.defaultPlainlinks.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiCommonHide.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiCommonLayout.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiCommonStyle.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiDarkmode.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiResponsive.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.specialSearch.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="./_mw_/site.styles.css">
<link rel="stylesheet" type="text/css" href="./_mw_/noscript.css">
<link rel="stylesheet" type="text/css" href="./_res_/footer.css">
<link rel="stylesheet" type="text/css" href="./_res_/vector-2022.css">
</head>
<body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject page-JQuery_UI rootpage-JQuery_UI skin-vector-2022 action-view">
<div class="mw-page-container">
<div class="mw-page-container-inner">
<div class="mw-content-container">
<main id="content" class="mw-body">
<header class="mw-body-header vector-page-titlebar">
<h1 id="firstHeading" class="firstHeading mw-first-heading">jQuery UI</h1>
</header>
<a id="top"></a>
<div id="bodyContent" class="vector-body ve-init-mw-desktopArticleTarget-targetContainer" aria-labelledby="firstHeading" data-mw-ve-target-container="">
<div id="contentSub">
<div id="mw-content-subtitle"></div>
</div>
<div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="de" dir="ltr"><div class="mw-content-ltr mw-parser-output" lang="de" dir="ltr"><table class="float-right infobox toccolours toptextcells" style="border-spacing:5px; font-size:90%; text-align:left; width:21em;">
<tbody><tr>
<th colspan="2" class="hintergrundfarbe6" style="font-size:105%; text-align:center;">jQuery UI
<p class="mw-empty-elt">
</p>
</th></tr>
<tr>
<td colspan="2" class="notheme" style="text-align:center; background-color:#f8f9fa;"><span typeof="mw:File"></span>
</td></tr>
<tr>
<th colspan="2" class="hintergrundfarbe5" style="font-size:105%; text-align:center;">Basisdaten
<p class="mw-empty-elt">
</p>
</th></tr>
<tr>
<td><b><a href="Softwareentwickler" title="Softwareentwickler">Entwickler</a></b>
</td>
<td>The jQuery Project
</td></tr>
<tr>
<td><b>Erscheinungsjahr</b>
</td>
<td><span class="wikidata-content">17. September 2007</span>
</td></tr>
<tr>
<td><b>Aktuelle <a href="Version_(Software)" title="Version (Software)">Version</a></b>
</td>
<td><span class="wikidata-content">1.14.1<sup id="cite_ref-_5fa53c5d14efe122_1-0" class="reference"><a href="#cite_note-_5fa53c5d14efe122-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-_2604549769831e30_2-0" class="reference"><a href="#cite_note-_2604549769831e30-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-_c5658e16b6b2c2ef_3-0" class="reference"><a href="#cite_note-_c5658e16b6b2c2ef-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-_3a564340ac429ca2_4-0" class="reference"><a href="#cite_note-_3a564340ac429ca2-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup></span> <br> (<span class="wikidata-content">30. Oktober 2024</span>)
</td></tr>
<tr>
<td><b>Aktuelle Vorabversion</b>
</td>
<td><span class="wikidata-content">1.14.0-beta.2<sup id="cite_ref-_ed0d4af6d435d7e5_5-0" class="reference"><a href="#cite_note-_ed0d4af6d435d7e5-5"><span class="cite-bracket">[</span>5<span class="cite-bracket">]</span></a></sup></span> <br> (<span class="wikidata-content">14. Juni 2024</span>)
</td></tr>
<tr>
<td><b><a href="Betriebssystem" title="Betriebssystem">Betriebssystem</a></b>
</td>
<td><a href="Plattformunabh%C3%A4ngigkeit" title="Plattformunabhängigkeit">plattformunabhängig</a>
</td></tr>
<tr>
<td><b><a href="Programmiersprache" title="Programmiersprache">Programmiersprache</a></b>
</td>
<td><a href="JavaScript" title="JavaScript">JavaScript</a>
</td></tr>
<tr>
<td><b>Kategorie</b>
</td>
<td><a href="Klassenbibliothek" class="mw-redirect" title="Klassenbibliothek">Klassenbibliothek</a>
</td></tr>
<tr>
<td><b>Lizenz</b>
</td>
<td><a href="MIT-Lizenz" title="MIT-Lizenz">MIT</a><sup id="cite_ref-6" class="reference"><a href="#cite_note-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-7" class="reference"><a href="#cite_note-7"><span class="cite-bracket">[</span>7<span class="cite-bracket">]</span></a></sup>
</td></tr>
<tr>
<td class="hintergrundfarbe5" colspan="2" style="text-align:center;"><a rel="nofollow" class="external text" href="https://jqueryui.com/">jqueryui.com</a>
</td></tr></tbody></table>
<p><b>jQuery UI</b> ist eine Erweiterung der freien <a href="JavaScript" title="JavaScript">JavaScript</a>-<a href="Programmbibliothek" title="Programmbibliothek">Bibliothek</a> <a href="JQuery" title="JQuery">jQuery</a> und bietet Lösungen zur Gestaltung und Funktionalität der <a href="Grafische_Benutzeroberfl%C3%A4che" title="Grafische Benutzeroberfläche">Benutzeroberfläche</a> (<span style="font-style:normal;font-weight:normal"><a href="Englische_Sprache" title="Englische Sprache">englisch</a></span> <span lang="en-Latn" style="font-style:italic">user interface</span>, <i>UI</i>) an.
</p>
<div class="mw-heading mw-heading2"><h2 id="Funktionalität"><span id="Funktionalit.C3.A4t"></span>Funktionalität</h2></div>
<div class="mw-heading mw-heading3"><h3 id="Interaktion">Interaktion</h3></div>
<ul><li><i>Draggable</i> und <i>Droppable</i> – ermöglicht <a href="Drag_and_Drop" title="Drag and Drop">Drag and Drop</a></li>
<li><i>Resizable</i> – lässt den Benutzer ein Element vergrößern und verkleinern</li>
<li><i>Selectable</i> – erweiterte Funktionalität zum Markieren von Elementen</li>
<li><i>Sortable</i> – spendet Funktionalität zum Sortieren gleichartiger Elemente</li></ul>
<div class="mw-heading mw-heading3"><h3 id="Effekte">Effekte</h3></div>
<p>Das zu Grunde liegende <a href="Framework" title="Framework">Framework</a> jQuery bietet bereits einige Effekte an, die jQuery UI um folgende erweitert:
</p>
<ul><li>Farbanimation</li>
<li>Animation eines Klassenwechsels – animiert den Wechsel einer <a href="Stylesheet" class="mw-redirect" title="Stylesheet">Stylesheet</a>-Klasse</li>
<li>Blendeffekte (Explosion, Schütteln, Springen etc.)</li></ul>
<div class="mw-heading mw-heading3"><h3 id="Widgets">Widgets</h3></div>
<p><a href="Widget" title="Widget">Widgets</a> sind programmierte Lösungen für Webentwickler, die gängige Elemente von Benutzeroberflächen benutzen möchten:
</p>
<dl><dt>Autocomplete</dt>
<dd>bietet eine Funktion für das automatische Vervollständigen von Textfeldern, auch via <a href="Ajax_(Programmierung)" title="Ajax (Programmierung)">Ajax</a></dd>
<dt>Button</dt>
<dd>bietet eine Schnittstelle für das Bereitstellen gängiger <a href="Schaltfl%C3%A4che" title="Schaltfläche">Schaltflächen</a>-Designs</dd>
<dt>Datepicker</dt>
<dd>stellt ein Menü zur Datumsauswahl bereit</dd>
<dt>Dialog</dt>
<dd>bietet die Möglichkeit, ein <a href="Dialogfenster" class="mw-redirect" title="Dialogfenster">Dialogfenster</a> zu generieren</dd>
<dt>Progressbar</dt>
<dd>Stellt eine Schnittstelle zur Anzeige eines <a href="Fortschrittsanzeige#Bestimmte_Fortschrittsanzeige" title="Fortschrittsanzeige">Fortschrittbalkens</a> zur Verfügung</dd>
<dt>Slider</dt>
<dd>bietet einen Schieberegler</dd>
<dt>Tabs</dt>
<dd>gibt dem Entwickler die Möglichkeit, <a href="Registerkarte" title="Registerkarte">Registerkarten</a> darzustellen</dd>
<dt>Accordion</dt>
<dd>stellt eine Art Faltwand bereit, mit der bestimmte Elemente automatisch ein- und ausklappen</dd></dl>
<div class="mw-heading mw-heading2"><h2 id="Modularität"><span id="Modularit.C3.A4t"></span>Modularität</h2></div>
<p>jQuery UI ist komplett <a href="Modul_(Software)" title="Modul (Software)">modular</a> aufgebaut. Ein Entwickler hat die Möglichkeit, nur die <a href="Komponente_(Software)" class="mw-redirect" title="Komponente (Software)">Komponenten</a> einzubinden, die er tatsächlich benötigt. Dies begrenzt den Bedarf an Ressourcen wie z. B. Arbeitsspeicher oder Zeit zum Laden der Bibliothek. Der sogenannte <i>ThemeRoller</i> erlaubt es Anwendern, das Aussehen aller integrierten Widgets dem persönlichen Geschmack anzupassen.<sup id="cite_ref-8" class="reference"><a href="#cite_note-8"><span class="cite-bracket">[</span>8<span class="cite-bracket">]</span></a></sup>
</p>
<div class="mw-heading mw-heading2"><h2 id="Siehe_auch">Siehe auch</h2></div>
<ul><li><a href="JQuery" title="JQuery">jQuery</a></li>
<li><a href="Webframework" title="Webframework">Webframework</a></li></ul>
<div class="mw-heading mw-heading2"><h2 id="Weblinks">Weblinks</h2></div>
<ul><li><a rel="nofollow" class="external text" href="https://jqueryui.com/">Website von jQuery UI</a></li>
<li><a rel="nofollow" class="external text" href="https://github.com/jquery/jquery-ui">jQuery UI</a> auf Github</li></ul>
<div class="mw-heading mw-heading2"><h2 id="Einzelnachweise">Einzelnachweise</h2></div>
<ol class="references">
<li id="cite_note-_5fa53c5d14efe122-1"><span class="mw-cite-backlink"><a href="#cite_ref-_5fa53c5d14efe122_1-0">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://blog.jqueryui.com/2024/10/jquery-ui-1-14-1-released/"><cite style="font-style:italic"><span lang="en">jQuery UI 1.14.1 released</span></cite>.</a> 30. Oktober 2024 (abgerufen am 5. November 2024).</span>
</li>
<li id="cite_note-_2604549769831e30-2"><span class="mw-cite-backlink"><a href="#cite_ref-_2604549769831e30_2-0">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://github.com/jquery/jquery-ui/releases/tag/1.14.1"><cite style="font-style:italic"><span lang="en">jQuery UI 1.14.1 released</span></cite>.</a> 30. Oktober 2024 (abgerufen am 5. November 2024).</span>
</li>
<li id="cite_note-_c5658e16b6b2c2ef-3"><span class="mw-cite-backlink"><a href="#cite_ref-_c5658e16b6b2c2ef_3-0">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://registry.npmjs.com/jquery-ui"><cite style="font-style:italic">registry.npmjs.com</cite>.</a> In: <cite style="font-style:italic">npmjs</cite>. (abgerufen am 5. November 2024).</span>
</li>
<li id="cite_note-_3a564340ac429ca2-4"><span class="mw-cite-backlink"><a href="#cite_ref-_3a564340ac429ca2_4-0">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://releases.jquery.com/resources/cdn.json"><cite style="font-style:italic">releases.jquery.com</cite>.</a> (abgerufen am 5. November 2024).</span>
</li>
<li id="cite_note-_ed0d4af6d435d7e5-5"><span class="mw-cite-backlink"><a href="#cite_ref-_ed0d4af6d435d7e5_5-0">↑</a></span> <span class="reference-text">Michał Gołębiowski-Owczarek: <a rel="nofollow" class="external text" href="https://blog.jqueryui.com/2024/06/jquery-ui-1-14-0-beta-2-released/"><cite class="lang" lang="en" dir="auto" style="font-style:italic"><span lang="en">jQuery UI 1.14.0-beta.2 released</span></cite>.</a> 14. Juni 2024 (englisch, abgerufen am 15. Juni 2024).</span>
</li>
<li id="cite_note-6"><span class="mw-cite-backlink"><a href="#cite_ref-6">↑</a></span> <span class="reference-text"><span class="cite"><a rel="nofollow" class="external text" href="https://github.com/jquery/jquery-ui/blob/main/LICENSE.txt"><i>LICENSE.txt.</i></a> In: <i>github.com.</i><span class="Abrufdatum"> Abgerufen am 5. März 2022</span> (englisch).</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AJQuery+UI&rft.title=LICENSE.txt&rft.description=LICENSE.txt&rft.identifier=https%3A%2F%2Fgithub.com%2Fjquery%2Fjquery-ui%2Fblob%2Fmain%2FLICENSE.txt&rft.language=en"> </span></span>
</li>
<li id="cite_note-7"><span class="mw-cite-backlink"><a href="#cite_ref-7">↑</a></span> <span class="reference-text"><span class="cite"><a rel="nofollow" class="external text" href="https://blog.jquery.com/2012/09/10/jquery-licensing-changes/"><i>jQuery Licensing Changes.</i></a> In: <i>jQuery-Blog.</i> 10. September 2012,<span class="Abrufdatum"> abgerufen am 5. März 2022</span> (englisch).</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AJQuery+UI&rft.title=jQuery+Licensing+Changes&rft.description=jQuery+Licensing+Changes&rft.identifier=https%3A%2F%2Fblog.jquery.com%2F2012%2F09%2F10%2Fjquery-licensing-changes%2F&rft.date=2012-09-10&rft.language=en"> </span></span>
</li>
<li id="cite_note-8"><span class="mw-cite-backlink"><a href="#cite_ref-8">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://jqueryui.com/themeroller/">jQuery UI ThemeRoller</a></span>
</li>
</ol>
<div class="hintergrundfarbe1 rahmenfarbe1 navigation-not-searchable normdaten-typ-s" style="border-style: solid; border-width: 1px; clear: left; margin-bottom:1em; margin-top:1em; padding: 0.25em; overflow: hidden; word-break: break-word; word-wrap: break-word;" id="normdaten">
<div style="display: table-cell; vertical-align: middle; width: 100%;">
<div>
Normdaten (Sachbegriff): <a href="Gemeinsame_Normdatei" title="Gemeinsame Normdatei">GND</a>: <span class="-print"><a rel="nofollow" class="external text" href="https://d-nb.info/gnd/1031219404">1031219404</a></span> </div>
</div></div></div><!--htdig_noindex--><div><div class="zim-footer">
Dieser Artikel wurde von <a class="external text" title="Zuletzt bearbeitet am 2025-10-16" href="https://de.wikipedia.org/wiki/?title=JQuery_UI&oldid=260649966">Wikipedia</a> herausgegeben. Der Text ist unter <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.de">Creative Commons Attribution-Share Alike 4.0</a> verfügbar, sofern nicht anders angegeben. Für die Mediendateien können zusätzliche Bedingungen gelten.
</div>
</div><!--/htdig_noindex--></div>
</div>
</main>
</div>
</div>
</div>
<script src="./_webp_/webpHandler.js"></script>
</body></html>